import React, { Component, createRef } from 'react'
import { Table, Card, Button, message, Modal } from 'antd';
import { getAllUser } from '../../redux/actions/userAction'
import { connect } from 'react-redux'
import { deleteUsersAccount, addUsersAccount } from '../../api/user'
import AddUsers from './addUsers';

class Users extends Component {
    state = {
        isModalVisible: false,
        
       
    }
    inputRef = createRef()
    componentDidMount() {
        this.getUsersList()
    }
    // 获取所有用户
    getUsersList = () => {
        this.props.dispatch(getAllUser())
    }
    // 删除
    deleteUsers = async (id) => {
        console.log(id);
        const res = await deleteUsersAccount({ id })
        console.log(res);
        if (res.code) {
            message.success('删除成功');
            this.getUsersList()
        }
    }
    setModal1Visible = async (isModalVisible) => {
        this.setState({ isModalVisible });
        console.log(this.inputRef.current.state.addUser);
        const res = await addUsersAccount(this.inputRef.current.state.addUser)
        if (res.code) {
            message.success(res.msg);
            this.getUsersList()
            this.setState({
                isModalVisible: false
            })
        } else {
            message.warning('取消添加');
        }
    }
    render() {
        const { data } = this.props
    
        // console.log(this.props);
        const columns = [
            {
                title: '用户名字',
                dataIndex: 'account',
                render: (text, record, index) => {
                    return <a>{text}</a>
                },
            },
            {
                title: '邮箱地址',
                dataIndex: 'email'
            },
            {
                title: '角色',
                dataIndex: ['role', 'name']
            },
            {
                title: '操作',
                width: 250,
                render: (text, record) => (
                   
                        <Button type="primary" size='middle' danger onClick={() => this.deleteUsers(record._id)}>
                            删除
                        </Button>
                    
                ),
            },
        ];

        return (

            <Card title={<Button type="primary" onClick={() => { this.setState({ isModalVisible: true }) }}>添加用户</Button>} bordered={false}>
                <Table rowKey='_id' columns={columns} dataSource={data} />
                <Modal
                    title="添加用户"
                    visible={this.state.isModalVisible}
                    onOk={() => this.setModal1Visible(false)}
                    onCancel={() => this.setModal1Visible(false)}
                    okText='提交'
                    cancelText='退出'
                >
                    <AddUsers ref={this.inputRef} data={data}></AddUsers>
                </Modal>
              
            </Card>


        )
    }
}
const mapStateToProps = (state) => {
    return { data: state.userList.data }
}
export default connect(mapStateToProps)(Users)